<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { reqFileDetail, reqReviewFileDetail } from '@/api/teacher/record/file';
import { showNotify, showFailToast, showSuccessToast } from 'vant';
import { applyState } from '@/utils/getStateNumber.js';

const routes = useRoute();
const router = useRouter();

const fileNoteDetail = ref({});

const getNoteDetail = async () => {
    try {
        const result = await reqFileDetail(routes.query.id);
        if (result.status == 200) {
            fileNoteDetail.value = result.data;
        } else {
            throw new Error(result.resultMessage || '获取信息失败');
        }
    } catch (e) {
        showFailToast(e.message);
        router.push({ name: 'home-teacher' });
    }
};

const teacherReview = ref('');

const review = async state => {
    try {
        // state == 6 表示通过 ; state == 7 表示不通过
        if (teacherReview.value == '') {
            showNotify({
                message: '请输入审批回复',
                type: 'warning',
                duration: 3000
            });
            return;
        }

        const result = await reqReviewFileDetail({
            id: routes.query.id,
            state,
            reply: teacherReview.value
        });

        if (result.status == 200) {
            showSuccessToast('审批成功, 3秒后自动返回上一页');
            const timer = setTimeout(() => {
                router.go(-1);
                clearTimeout(timer);
            }, 3000);
        } else {
            throw new Error(result.statusText || '审批失败');
        }
    } catch (e) {
        showFailToast(e.message);
    }
};

onMounted(() => {
    getNoteDetail();
});

const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;

</script>

<template>
    <div class="container">
        <h2 class="heading">
            {{ fileNoteDetail.userName }}的{{
                fileNoteDetail.detailedType == 1 ? '档案预约' : '盖章预约'
            }}申请
        </h2>
        <el-descriptions :column="1" size="large">
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="审核状态"
            >
                {{ applyState(fileNoteDetail.state) }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="姓名"
            >
                {{ fileNoteDetail.userName }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="班级"
            >
                {{ fileNoteDetail.className }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="班主任"
            >
                {{ fileNoteDetail.headTeacherName }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="类型"
            >
                {{ fileNoteDetail.detailedType == 1 ? '档案预约' : '盖章预约' }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="预约时间"
            >
                {{ fileNoteDetail.startTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="联系电话"
            >
                {{ fileNoteDetail.phone }}
            </el-descriptions-item>
        </el-descriptions>

        <div class="form" v-if="fileNoteDetail.state == 0">
            <div class="form__input-wrapper">
                <label class="input-label">审批回复</label>
                <el-input
                    size="large"
                    placeholder="请填写审批回复"
                    v-model.trim="teacherReview"
                ></el-input>
            </div>
            <div class="form__button-wrapper">
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="review(6)"
                >
                    通过
                </el-button>
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="review(7)"
                >
                    不通过
                </el-button>
            </div>
        </div>

        <img
            class="pass-img"
            v-show="fileNoteDetail.state == 6"
            :src="`${PUBLIC_URL}/common-pass.png`"
            alt="图片"
        />
    </div>
</template>

<style scoped lang="scss">
.container {
    padding: 20rem;
    background-color: rgb(247, 247, 247);
}

.heading {
    font-size: 22rem;
    text-align: center;
    margin-bottom: 20rem;
    font-weight: bold;
}

:deep(.content) {
    font-size: 18rem !important;
}

.pass-img {
    position: absolute;
    width: 140rem;
    right: 30rem;
    top: 100rem;
}

.form {
    &__input-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 20rem;
    }

    &__button-wrapper {
        width: 100%;
        text-align: center;

        .button {
            font-size: 18rem;
        }
    }

    .input-label {
        width: 120rem;
        font-size: 18rem;
    }
}
</style>
